<template>
  <common-card class="student-performance">
    <template #title>学生表现</template>
    <!-- <template #operate
      ><span class="operate"
        ><label class="operate__icon"></label
        ><span class="operate__desc">导出</span></span
      ></template
    > -->
    <div class="search">
      <label>正确率区间:</label>
      <a-select
        placeholder="全部"
        v-model:value="selectedRange"
        :dropdownMatchSelectWidth="false"
      >
        <a-select-option
          v-for="(item, index) in levelList"
          :key="index"
          :value="index"
          >{{ item.desc }}&nbsp;&nbsp;&nbsp;
          <template v-if="index !== 0"
            >{{ item.num }}人</template
          ></a-select-option
        >
      </a-select>
    </div>
    <div class="table">
      <a-table
        :showSorterTooltip="false"
        :columns="PERFORMANCE_COLUMN"
        :dataSource="getData"
        :pagination="false"
        :scroll="{ y: 300 }"
      >
        <template v-slot:bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'student_name'">
            <span class="student-name" @click="showDetail(record)">{{
              record.student_name
            }}</span></template
          >
          <template v-if="column.dataIndex === 'right_rate'">
            {{ getPercent(record.right_rate) }}%</template
          >
          <template v-if="column.dataIndex === 'submit_rate'">
            {{ getPercent(record.submit_rate) }}%</template
          >
          <template v-if="column.dataIndex === 'level'">
            {{ getLevel(record.right_rate) }}</template
          >
        </template></a-table
      >
    </div>
  </common-card>
</template>
<script setup>
import CommonCard from '../components/CommonCard.vue'
import { PERFORMANCE_COLUMN } from '../constant'
import { getStudentPerformance } from '@/apis/situation-report/index'
import { useSituationReport } from '@/stores/situation-report'
import { getPercent, getLevel } from '../utils'
import $bus from '@/utils/tools/bus'
import { ref, watchEffect, computed } from 'vue'
const situationReport = useSituationReport()

const selectedRange = ref(0)
const dataList = ref()
const levelList = ref([
  { desc: '全部', num: 0, children: [] },
  { desc: '0%-10%', num: 0, children: [] },
  { desc: '10%-20%', num: 0, children: [] },
  { desc: '20%-30%', num: 0, children: [] },
  { desc: '30%-40%', num: 0, children: [] },
  { desc: '40%-50%', num: 0, children: [] },
  { desc: '50%-60%', num: 0, children: [] },
  { desc: '60%-70%', num: 0, children: [] },
  { desc: '70%-80%', num: 0, children: [] },
  { desc: '80%-90%', num: 0, children: [] },
  { desc: '90%-100%', num: 0, children: [] }
])

const getData = computed(() => {
  if (selectedRange.value === 0) {
    return dataList.value
  } else {
    return levelList.value[selectedRange.value].children
  }
})

const getList = async () => {
  const params = {
    ...situationReport.search,
    min_right_rate: 0,
    max_right_rate: 1
  }
  const {
    data: { list }
  } = await getStudentPerformance(params)
  dataList.value = list || []
  handleData()
}

const showDetail = item => {
  $bus.emit('change-tab', {
    active: 'student',
    id: item.student_id,
    name: item.student_name
  })
}

const handleData = () => {
  dataList.value?.forEach(item => {
    if (item.right_rate < 0.1) {
      levelList.value[1].num += 1
      levelList.value[1].children.push(item)
    } else if (item.right_rate < 0.2) {
      levelList.value[2].num += 1
      levelList.value[2].children.push(item)
    } else if (item.right_rate < 0.3) {
      levelList.value[3].num += 1
      levelList.value[3].children.push(item)
    } else if (item.right_rate < 0.4) {
      levelList.value[4].num += 1
      levelList.value[4].children.push(item)
    } else if (item.right_rate < 0.5) {
      levelList.value[5].num += 1
      levelList.value[5].children.push(item)
    } else if (item.right_rate < 0.6) {
      levelList.value[6].num += 1
      levelList.value[6].children.push(item)
    } else if (item.right_rate < 0.7) {
      levelList.value[7].num += 1
      levelList.value[7].children.push(item)
    } else if (item.right_rate < 0.8) {
      levelList.value[8].num += 1
      levelList.value[8].children.push(item)
    } else if (item.right_rate < 0.9) {
      levelList.value[9].num += 1
      levelList.value[9].children.push(item)
    } else {
      levelList.value[10].num += 1
      levelList.value[10].children.push(item)
    }
  })
}

watchEffect(() => {
  if (
    situationReport.search.class_id ||
    situationReport.search.subject_id ||
    situationReport.search.grade_id
  ) {
    getList()
  }
})
</script>
<style lang="less" scoped>
@import '../style.less';

.student-performance {
  :deep(.ant-select) {
    width: 186px;

    .ant-select-selector {
      border-radius: @small-radius;
    }
  }

  .operate {
    &__icon {
      background: url('@/assets/images/situation-report/export.png') no-repeat
        center/cover;
      margin-right: 8px;
    }
  }

  .search {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;

    label {
      color: rgb(4 11 26 / 1);
      font-size: 14px;
    }
  }

  .table {
    margin-top: @gap;

    .student-name {
      color: #4d88ff;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
